<!--
 * @Author: your name
 * @Date: 2021-10-06 16:14:11
 * @LastEditTime: 2021-10-06 19:07:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\functionPage\workbench\index.vue
-->
<template>
    <Card class="timeline">
        <div class="userinfo">
            <div class="userinfo_avatar">
                <img src="../../../../../assets/image/avatar.jpg" alt="头像" />
            </div>
            <div class="userinfo_name">韶华倾负</div>
            <div class="userinfo_tag">人生如逆旅，我亦是行人</div>
            <div class="userinfo_edit">
                <Button block>编辑</Button>
            </div>
        </div>
        <div class="loginline">
            <div class="title">登录历史</div>
            <VTimeline :datas="userlist"></VTimeline>
        </div>
    </Card>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { Card, Button } from 'ant-design-vue'
import VTimeline from '@/components/Timeline/Timeline.vue'

export default defineComponent({
    name: 'Workbench',
    components: {
        Card,
        Button,
        VTimeline,
    },
    setup() {
        let userlist = [
            {
                title: '本次时间',
                time: '2021/10/6-15:00',
                text: '廊坊、小雨',
                theme: 'pink',
            },
            {
                title: '上次登录',
                time: '2021/10/5-09:10',
                text: '廊坊、小雨',
                theme: 'pink',
            },
        ]
        return {
            userlist,
        }
    },
})
</script>

<style lang="less" scoped>
@import "../../../../../styles/pagestyle.less";
.loginline {
  overflow-y: scroll;
  height: 260px;
  padding: 15px 10px;
  .title {
    width: 100%;

    margin: 20px;
    font-size: 13px;
  }
}

.timeline {
  height: 100%;
  .userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    & > div {
      margin: 15px 0;
    }
    &_avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      padding: 1px;
      box-sizing: border-box;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      overflow: hidden;
      & > img {
        width: 100%;
      }
    }
    &_name {
      font-weight: bold;
    }
    &_tag {
      font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
        "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
      font-weight: 100;
    }
    &_edit {
      width: 100%;
    }
  }
}
::-webkit-scrollbar-track {
  background-color: rgba(247, 244, 244, 1);
}

::-webkit-scrollbar-thumb {
  // background: rgba(0, 0, 0, 0.6);
  background-color: rgba(144, 147, 153, 0);
  // background-color: rgba(144, 147, 153, 0.3);
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
}
</style>
